Secondary and Multiple Axis
SciChart.js supports unlimited, multiple X or Y axis which can be aligned to the Right, Left, Top, Bottom sides of a chart.
Above: The Multiple X Axis example in SciChart.js demo.
How to Setup a Chart with Multiple Axis
- Axis may be placed by setting the AxisBase2D.axisAlignment property.
- Axis.Id identifies an axis in multi-axis scenarios
- Series, Annotations and some Modifiers have yAxisId, yAxisId properties. These are used to assign chart items to an axis in multi-axis scenarios.
There's little more to it than that. However, there are many configurations in SciChart.js which we will get into later.
Here's a worked example:
This code results in the following configuration of axis. Also seen in our Multiple Axis Demo.
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
async function multipleAxis(divElementId) {
// Demonstrates how to configure multiple axis in SciChart.js
const {
SciChartSurface,
NumericAxis,
SciChartJsNavyTheme,
ELabelAlignment,
EAxisAlignment,
NumberRange,
ENumericFormat
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"
const ID_X_AXIS_2 = "xAxis2";
const ID_Y_AXIS_2 = "yAxis2";
const titleStyle1 = {
color: "#50C7E0",
fontSize: 30,
};
const labelStyle1 = {
color: "#50C7E0"
};
const titleStyle2 = {
color: "#F48420",
fontSize: 30,
};
const labelStyle2 = {
color: "#F48420",
alignment: ELabelAlignment.Right
};
// #region ExampleA
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
theme: new SciChartJsNavyTheme()
});
// Add a primary X,Y Axis pair
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
axisAlignment: EAxisAlignment.Bottom,
axisTitle: "X Axis Bottom",
axisTitleStyle: titleStyle1,
labelStyle: labelStyle1,
backgroundColor: "#50C7E022",
axisBorder: {
borderTop: 1,
color: "#50C7E0"
}
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
axisAlignment: EAxisAlignment.Left,
axisTitle: "Y Axis Left",
axisTitleStyle: titleStyle1,
labelStyle: labelStyle1,
growBy: new NumberRange(0.1, 0.1),
backgroundColor: "#50C7E022",
axisBorder: {
borderRight: 1,
color: "#50C7E0"
}
}));
// Add a secondary X,Y Axis pair
// Series are tied to the axis via the ID_
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
id: ID_X_AXIS_2,
axisTitleStyle: titleStyle2,
labelStyle: labelStyle2,
axisAlignment: EAxisAlignment.Top,
axisTitle: "X Axis Top",
backgroundColor: "#F4842022",
axisBorder: {
borderBottom: 1,
color: "#F48420"
}
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
id: ID_Y_AXIS_2,
axisTitleStyle: titleStyle2,
labelStyle: labelStyle2,
axisAlignment: EAxisAlignment.Right,
axisTitle: "Y Axis Right",
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
growBy: new NumberRange(0.1, 0.1),
backgroundColor: "#F4842022",
axisBorder: {
borderLeft: 1,
color: "#F48420"
}
}));
// #endregion
};
multipleAxis("scichart-root");
async function builderExample(divElementId) {
// Demonstrates how to configure multiple axis in SciChart.js using the Builder API
const {
chartBuilder,
EThemeProviderType,
EAxisType,
ELabelAlignment
} = SciChart;
const ID_X_AXIS_2 = "xAxis2";
const ID_Y_AXIS_2 = "yAxis2";
const titleStyle1 = {
color: "#50C7E0",
fontSize: 30,
};
const labelStyle1 = {
color: "#50C7E0"
};
const titleStyle2 = {
color: "#F48420",
fontSize: 30,
};
const labelStyle2 = {
color: "#F48420",
alignment: ELabelAlignment.Right
};
// or, for npm, import { chartBuilder, ... } from "scichart"
// #region ExampleB
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: { theme: { type: EThemeProviderType.Dark } },
xAxes: [
{
type: EAxisType.NumericAxis,
options: {
axisAlignment: EAxisAlignment.Bottom,
axisTitle: "X Axis Bottom",
axisTitleStyle: titleStyle1,
labelStyle: labelStyle1,
backgroundColor: "#50C7E022",
axisBorder: {
borderTop: 1,
color: "#50C7E0"
}
}
},
{
type: EAxisType.NumericAxis,
options: {
id: ID_X_AXIS_2,
axisTitleStyle: titleStyle2,
labelStyle: labelStyle2,
axisAlignment: EAxisAlignment.Top,
axisTitle: "X Axis Top",
backgroundColor: "#F4842022",
axisBorder: {
borderBottom: 1,
color: "#F48420"
}
}
}
],
yAxes: [
{
type: EAxisType.NumericAxis,
options: {
axisAlignment: EAxisAlignment.Left,
axisTitle: "Y Axis Left",
axisTitleStyle: titleStyle1,
labelStyle: labelStyle1,
growBy: new NumberRange(0.1, 0.1),
backgroundColor: "#50C7E022",
axisBorder: {
borderRight: 1,
color: "#50C7E0"
}
}
},
{
type: EAxisType.NumericAxis,
options: {
id: ID_Y_AXIS_2,
axisTitleStyle: titleStyle2,
labelStyle: labelStyle2,
axisAlignment: EAxisAlignment.Right,
axisTitle: "Y Axis Right",
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
growBy: new NumberRange(0.1, 0.1),
backgroundColor: "#F4842022",
axisBorder: {
borderLeft: 1,
color: "#F48420"
}
}
}
]
});
// #endregion
};
// Uncomment this to use the builder example
//builderExample("scichart-root");
Attaching Chart Series to an Axis
Every RenderableSeries (the chart types in SciChart.js e.g. Line, Candlestick, Column) and every Annotation (Trendlines, text or markers laid over the chart) and some ChartModifiers (zoom, pan behaviours) need to be attached to a particular axis.
The link between series and axis is done via AxisCore.id, and BaseRenderableSeries.xAxisId and BaseRenderableSeries.yAxisId properties.
With a single X,Y Axis you never have to set these properties as all equal DEFAULT_AXIS_ID. All of them have a default value which attaches the series, annotation or modifier to the default axis.
However, in a multiple axis scenario, series must be attached to an axis. To do this, ensure that you set the BaseRenderableSeries.xAxisId and BaseRenderableSeries.yAxisId equal to the YAxis.id or XAxis.id you wish to attach to.